<template>
    <div id="Idea">
        <div class="content w clearfix">
            <div class="top">
                <div class="people-img">
                    <img :src='url' alt="" v-if="!flag" @click="toggleShow" class='imgg'>

                    <img class="m_logoimg" :src="imgDataUrl" v-show="flag">
                    <my-upload field="img"
                               @crop-success="cropSuccess"
                               @crop-upload-success="cropUploadSuccess"
                               @crop-upload-fail="cropUploadFail"
                               v-model="show"
                               :width="300"
                               :height="300"
                               url="/users/avator"
                               :params="params"
                               :headers="headers"
                               img-format="png"
                    ></my-upload>
                </div>
                <p>{{this.name}}</p>
            </div>
            <div class="tab clearfix">
                <ul>
                    <li>
                        <router-link to="/idea">我的IDEA</router-link>
                    </li>
                    <li>
                        <router-link to='/idea/chat'>私信</router-link>
                    </li>
                    <li>
                        <router-link to="/idea/my">资料信息</router-link>
                    </li>
                    <li>
                        <router-link to="/idea/rank">排行榜</router-link>
                    </li>
                </ul>
            </div>
            <router-view>

            </router-view>
        </div>

    </div>
</template>

<script>
    import 'babel-polyfill'; // es6 shim
    import myUpload from 'vue-image-crop-upload/upload-2.vue';
    export default {
        components: {
            'my-upload': myUpload
        },
        watch: {
            url(){
            }
        },
        data() {
            return {
                url: '',
                name: '',
                avator: '',
                flag: false,
                show: false,
                flag: false,

                params: {
                    token: '123456798',
                    name: 'avatar'
                },
                headers: {
                    smail: '*_~'
                },
                imgDataUrl: '' // the datebase64 url of created image
            }
        },
        mounted(){
            var _this = this
            this.http.post('/users/info').then(function (res) {
                if (res.data.login == 0) {
                    console.log('用户未登录')
                } else if (res.data.login == 1) {
                    _this.name = res.data.name
                    _this.avator = res.data.avator
                    _this.$nextTick(function () {
                        _this.url = '/users/show/' + _this.avator;
                        var imgg = document.querySelector('.imgg');
                        imgg.src = _this.url
                    })

                }
            })

        },
        methods: {

            toggleShow() {
                this.show = !this.show;
            },

            cropSuccess(imgDataUrl, field){
                console.log('-------- crop success --------');
                this.imgDataUrl = imgDataUrl;
            },

            cropUploadSuccess(jsonData, field){
                console.log('-------- upload success --------');
                console.log(jsonData);
                console.log('field: ' + field);
                this.flag = true;
                window.location.reload();
//                window.location.href = "http://lonlong.cn";

            },

            cropUploadFail(status, field){
                console.log('-------- upload fail --------');
                console.log(status);
                console.log('field: ' + field);
            }

        }
    }
</script>

<style scoped>
    .content {
        background-color: #FAFAFA;
    }

    .content .top {
        /*float: left;*/
    }

    .people-img {
        padding-top: 30px;
        width: 960px;
        height: 180px;
        text-align: center;
    }

    .people-img img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .content .top p {
        height: 20px;
        padding-top: 20px;
        font-size: 24px;
        text-align: center;
    }

    .content ul {
        float: left;
        width: 704px;
        border: 1px solid #D9D9D9;
        list-style: none;
        margin: 0 auto;
        margin-top: 40px;
        margin-left: 134px;
        margin-right: 134px;
        border-radius: 5px;
    }

    .content ul li {

        float: left;
        line-height: 51px;
        padding: 5px 0 5px 0;
        width: 175px;
        font-size: 20px;

        background-color: white;

    }

    .content ul li a {
        display: block;
        line-height: 51px;
        text-align: center;
        border-right: 1px solid #E9E9E9;
    }

    .content ul li a:hover {

    }

    .content .p28 {
        margin: 20px 0;
        float: right;
        font-family: "微软雅黑";
        font-size: 20px;
        margin-right: 85px;

    }

    .content .list {
        float: left;
        width: 787px;
        height: 154px;
        border: 1px solid #D9D9D9;
        margin: 0 100px 20px 100px;
        font-family: "SimSun", "宋体";
        font-weight: bold;
    }

    .content .list p {
        float: left;
        margin-left: 20px;
        margin-right: 100px;
        font-size: 18px;
        padding-top: 20px;

        /*font;*/
    }


</style>
